<template>
  <view class="data-detail-page">
    <!-- 数据状态卡片 -->
    <view class="status-section" v-if="dataInfo">
      <view class="status-card">
        <view class="status-header">
          <text class="status-title">{{ dataInfo.feeName || '卫生费' }}</text>
          <view class="status-tag">
            <u-tag 
              :text="getStatusText(dataInfo.paymentStatus)" 
              :type="getStatusType(dataInfo.paymentStatus)" 
              size="mini"
            />
          </view>
        </view>
        <view class="status-desc">{{ getStatusDescription(dataInfo.paymentStatus) }}</view>
      </view>
    </view>

    <!-- 基本信息 -->
    <view class="info-section" v-if="dataInfo">
      <view class="info-card">
        <view class="card-title">基本信息</view>
        <view class="info-list">
          <view class="info-item">
            <view class="info-label">
              <u-icon name="home" size="16" color="#666"></u-icon>
              <text>房屋地址</text>
            </view>
            <text class="info-value">{{ dataInfo.householdAddress || '--' }}</text>
          </view>
          <view class="info-item">
            <view class="info-label">
              <u-icon name="calendar" size="16" color="#666"></u-icon>
              <text>计费周期</text>
            </view>
            <text class="info-value">{{ dataInfo.billingPeriod || '--' }}</text>
          </view>
          <view class="info-item">
            <view class="info-label">
              <u-icon name="clock" size="16" color="#666"></u-icon>
              <text>到期日期</text>
            </view>
            <text class="info-value due-date">{{ dataInfo.dueDate || '--' }}</text>
          </view>
          <view class="info-item">
            <view class="info-label">
              <u-icon name="rmb-circle" size="16" color="#666"></u-icon>
              <text>费用金额</text>
            </view>
            <text class="info-value amount">¥{{ formatAmount(dataInfo.amount) }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 详细信息 -->
    <view class="detail-section" v-if="dataInfo">
      <view class="detail-card">
        <view class="card-title">详细信息</view>
        <view class="detail-list">
          <view class="detail-item">
            <text class="detail-label">应收金额</text>
            <text class="detail-value">¥{{ formatAmount(dataInfo.amount) }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">已缴金额</text>
            <text class="detail-value">¥{{ formatAmount(dataInfo.paidAmount) }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">剩余金额</text>
            <text class="detail-value unpaid">¥{{ formatAmount(dataInfo.unpaidAmount || dataInfo.amount) }}</text>
          </view>
          <view class="detail-item" v-if="getSafeAmount(dataInfo.lateFee) > 0">
            <text class="detail-label">滞纳金</text>
            <text class="detail-value late-fee">¥{{ formatAmount(dataInfo.lateFee) }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 缴费进度 -->
    <view class="progress-section" v-if="dataInfo">
      <view class="progress-card">
        <view class="card-title">缴费进度</view>
        <view class="progress-content">
          <view class="progress-info">
            <text class="progress-text">已缴费</text>
            <text class="progress-amount">¥{{ formatAmount(dataInfo.paidAmount) }}</text>
          </view>
          <view class="progress-bar">
            <view 
              class="progress-fill" 
              :style="{ width: getProgressPercentage() + '%' }"
            ></view>
          </view>
          <view class="progress-percentage">{{ getProgressPercentage() }}%</view>
        </view>
      </view>
    </view>

    <!-- 缴费记录 -->
    <view class="records-section" v-if="paymentRecords.length > 0">
      <view class="records-card">
        <view class="card-title">缴费记录</view>
        <view class="records-list">
          <view 
            v-for="record in paymentRecords" 
            :key="record.id"
            class="record-item"
          >
            <view class="record-header">
              <text class="record-amount">¥{{ formatAmount(record.paymentAmount) }}</text>
              <text class="record-time">{{ formatTime(record.paymentTime) }}</text>
            </view>
            <view class="record-details">
              <text class="record-method">{{ getPaymentMethodText(record.paymentMethod) }}</text>
              <text class="record-status" :class="getRecordStatusClass(record.paymentStatus)">
                {{ getRecordStatusText(record.paymentStatus) }}
              </text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 扫码支付区域 - 根据缴费状态显示 -->
    <view class="payment-section" v-if="dataInfo && canShowAction">
      <view class="payment-card">
        <view class="card-title">
          <u-icon name="qr-code" color="#16a085" size="20"></u-icon>
          <text>扫码支付</text>
        </view>
        
        <!-- 物业公司信息 -->
        <view class="company-info" v-if="paymentInfo">
          <view class="company-name">{{ paymentInfo.companyName }}</view>
          <view class="company-desc" v-if="paymentInfo.paymentDescription">
            {{ paymentInfo.paymentDescription }}
          </view>
        </view>
        
        <!-- 收款二维码 -->
        <view class="qr-code-container" v-if="hasPaymentQrCodeFiles">
          <view class="qr-code-title">请扫描下方二维码进行支付</view>
          <view class="qr-code-images">
            <AppImagePreview 
              :images="paymentQrCodeFiles"
              :show-image-info="false"
              empty-text="暂无收款码"
              @preview="handleImagePreview"
              @error="handleImageError"
              @load="handleImageLoad"
            />
          </view>
          <view class="qr-code-tip">点击二维码可放大查看</view>
        </view>
        
        <!-- 支付账户信息 -->
        <view class="payment-account-info" v-if="paymentInfo && paymentInfo.paymentAccount">
          <view class="account-title">银行转账信息</view>
          <view class="account-item">
            <text class="account-label">收款账户：</text>
            <text class="account-value">{{ paymentInfo.paymentAccount }}</text>
          </view>
          <view class="account-item" v-if="paymentInfo.paymentBank">
            <text class="account-label">开户银行：</text>
            <text class="account-value">{{ paymentInfo.paymentBank }}</text>
          </view>
        </view>
        
        <!-- 联系信息 -->
        <view class="contact-info" v-if="paymentInfo && (paymentInfo.contactPhone || paymentInfo.serviceHotline)">
          <view class="contact-title">联系信息</view>
          <view class="contact-item" v-if="paymentInfo.contactPhone">
            <text class="contact-label">联系电话：</text>
            <text class="contact-value" @click="handleCall(paymentInfo.contactPhone)">
              {{ paymentInfo.contactPhone }}
            </text>
          </view>
          <view class="contact-item" v-if="paymentInfo.serviceHotline">
            <text class="contact-label">服务热线：</text>
            <text class="contact-value" @click="handleCall(paymentInfo.serviceHotline)">
              {{ paymentInfo.serviceHotline }}
            </text>
          </view>
        </view>
        
        <!-- 支付说明 -->
        <view class="payment-instructions">
          <view class="instructions-title">支付说明</view>
          <view class="instructions-content">
            <text class="instruction-item">1. 使用微信或支付宝扫描上方二维码</text>
            <text class="instruction-item">2. 输入缴费金额：¥{{ getPaymentAmount() }}</text>
            <text class="instruction-item">3. 备注房号：{{ dataInfo.householdAddress || '--' }}</text>
            <text class="instruction-item">4. 完成支付后截图保存</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-section" v-if="dataInfo">
      <view class="action-buttons">
        <u-button 
          v-if="dataInfo.paymentStatus !== 1"
          type="warning" 
          size="large"
          @click="handleReminder"
        >
          申请延期
        </u-button>
        <u-button 
          type="info" 
          size="large"
          @click="handleContact"
        >
          联系客服
        </u-button>
      </view>
    </view>

    <!-- 加载状态 -->
    <view class="loading-section" v-if="loading">
      <u-loading-icon mode="spinner" size="40"></u-loading-icon>
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 错误状态 -->
    <view class="error-section" v-if="errorMessage">
      <u-empty 
        mode="error" 
        text="加载失败"
        :description="errorMessage"
      >
        <template #bottom>
          <u-button 
            type="primary" 
            size="small"
            @click="retryLoad"
          >
            重试
          </u-button>
        </template>
      </u-empty>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { sanitationFeeApi, propertyPaymentApi } from '@/api/property.js'
import AppImagePreview from '@/components/AppImagePreview.vue'

// 数据状态
const dataInfo = ref(null)
const paymentRecords = ref([])
const paymentInfo = ref(null)
const loading = ref(false)
const actionLoading = ref(false)
const errorMessage = ref('')
const dataId = ref('')
const householdId = ref('')

// 计算属性：处理收款码数据
const hasPaymentQrCodeFiles = computed(() => {
  if (!paymentInfo.value || !paymentInfo.value.paymentQrCode) {
    return false
  }
  try {
    const qrCodeFiles = JSON.parse(paymentInfo.value.paymentQrCode)
    return Array.isArray(qrCodeFiles) && qrCodeFiles.length > 0
  } catch (error) {
    console.error('解析收款码数据失败:', error)
    return false
  }
})

const paymentQrCodeFiles = computed(() => {
  if (!paymentInfo.value || !paymentInfo.value.paymentQrCode) {
    return []
  }
  try {
    const qrCodeFiles = JSON.parse(paymentInfo.value.paymentQrCode)
    return Array.isArray(qrCodeFiles) ? qrCodeFiles : []
  } catch (error) {
    console.error('解析收款码数据失败:', error)
    return []
  }
})

// 计算属性
const canShowAction = computed(() => {
  if (!dataInfo.value) return false
  const status = dataInfo.value.paymentStatus
  return status === 0 || status === 2  // 未缴费或逾期时显示缴费按钮
})

// 页面生命周期
onLoad((options) => {
  if (options.id) {
    dataId.value = options.id
    loadDataDetail(options.id)
  } else {
    errorMessage.value = '参数错误：缺少数据ID'
  }
})

// 方法
const handleBack = () => {
  uni.navigateBack()
}

// 加载数据详情
const loadDataDetail = async (id) => {
  loading.value = true
  errorMessage.value = ''
  
  try {
    const response = await sanitationFeeApi.getSanitationFeeDetail(id)
    if (response.code === 200) {
      dataInfo.value = response.data
      // 如果费用详情中包含房户ID，则加载收款码信息
      if (response.data.householdId && !householdId.value) {
        householdId.value = response.data.householdId
        await loadPaymentInfo(response.data.householdId)
      }
      // 加载缴费记录
      await loadPaymentRecords(id)
    } else {
      throw new Error(response.message || '获取费用详情失败')
    }
  } catch (error) {
    console.error('获取费用详情失败:', error)
    errorMessage.value = error.message || '获取费用详情失败'
    uni.showToast({
      title: '获取费用详情失败',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}

// 加载缴费记录
const loadPaymentRecords = async (feeId) => {
  try {
    const response = await sanitationFeeApi.getPaymentRecords(feeId)
    if (response.code === 200) {
      paymentRecords.value = response.data || []
    }
  } catch (error) {
    console.error('获取缴费记录失败:', error)
    // 缴费记录获取失败不影响主流程
  }
}

// 重试加载
const retryLoad = () => {
  if (dataId.value) {
    loadDataDetail(dataId.value)
  }
}

// 加载收款码信息
const loadPaymentInfo = async (householdId) => {
  if (!householdId) {
    console.warn('房户信息不完整，无法获取收款码')
    return
  }
  
  try {
    const response = await propertyPaymentApi.getPaymentInfoByHouseholdId(householdId)
    if (response.code === 200) {
      paymentInfo.value = response.data
      console.log('获取收款码信息成功:', response.data)
    } else {
      console.warn('获取收款码信息失败:', response.message)
    }
  } catch (error) {
    console.error('获取收款码信息失败:', error)
    // 收款码获取失败不影响主页面显示
  }
}

// 处理操作
const handleAction = () => {
  if (!dataInfo.value) return
  
  uni.showModal({
    title: '确认操作',
    content: `确认执行操作？`,
    success: (res) => {
      if (res.confirm) {
        performAction()
      }
    }
  })
}

// 执行操作
const performAction = async () => {
  actionLoading.value = true
  
  try {
    const actionData = {
      dataId: dataId.value,
      amount: dataInfo.value.amount,
      paymentMethod: 'online' // 默认在线支付
    }
    
    const response = await sanitationFeeApi.paySanitationFee(actionData)
    
    if (response.code === 200) {
      uni.showToast({
        title: '缴费成功',
        icon: 'success'
      })
      
      // 重新加载详情
      await loadDataDetail(dataId.value)
    } else {
      throw new Error(response.message || '缴费失败')
    }
  } catch (error) {
    console.error('缴费失败:', error)
    uni.showToast({
      title: error.message || '缴费失败',
      icon: 'none'
    })
  } finally {
    actionLoading.value = false
  }
}

// 工具函数：安全格式化金额
const formatAmount = (amount) => {
  if (amount === null || amount === undefined || amount === '') return '0.00'
  
  const numAmount = Number(amount)
  if (isNaN(numAmount)) {
    console.warn('金额数据异常:', amount)
    return '0.00'
  }
  
  return numAmount.toFixed(2)
}

// 工具函数：安全获取金额
const getSafeAmount = (amount, defaultValue = 0) => {
  if (amount === null || amount === undefined || amount === '') return defaultValue
  
  const numAmount = Number(amount)
  if (isNaN(numAmount)) {
    console.warn('金额数据异常:', amount)
    return defaultValue
  }
  
  return numAmount
}

// 工具函数
const getStatusText = (status) => {
  const statusMap = {
    0: '未缴费',
    1: '已缴费',
    2: '逾期'
  }
  return statusMap[status] || '未知状态'
}

const getStatusType = (status) => {
  const typeMap = {
    0: 'warning',
    1: 'success',
    2: 'error'
  }
  return typeMap[status] || 'info'
}

const getStatusDescription = (status) => {
  const descMap = {
    0: '请及时缴费，避免产生滞纳金',
    1: '费用已全部缴纳完成',
    2: '费用已逾期，请尽快缴费'
  }
  return descMap[status] || '状态描述未知'
}

const getProgressPercentage = () => {
  if (!dataInfo.value || !dataInfo.value.amount) return 0
  
  // 确保数据类型安全，转换为数字类型
  const paidAmount = Number(dataInfo.value.paidAmount) || 0
  const totalAmount = Number(dataInfo.value.amount) || 0
  
  if (totalAmount === 0) return 0
  
  const percentage = (paidAmount / totalAmount) * 100
  return Math.min(Math.round(percentage), 100)
}

const formatTime = (timeStr) => {
  if (!timeStr) return '--'
  
  try {
    const date = new Date(timeStr)
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    const hours = String(date.getHours()).padStart(2, '0')
    const minutes = String(date.getMinutes()).padStart(2, '0')
    
    return `${year}-${month}-${day} ${hours}:${minutes}`
  } catch (error) {
    console.error('时间格式化失败:', error)
    return timeStr
  }
}

const getPaymentMethodText = (method) => {
  const methodMap = {
    'cash': '现金',
    'wechat': '微信支付',
    'alipay': '支付宝',
    'bank': '银行卡',
    'balance': '余额支付',
    'online': '在线支付'
  }
  return methodMap[method] || '未知方式'
}

const getRecordStatusText = (status) => {
  const statusMap = {
    '0': '待支付',
    '1': '支付中',
    '2': '支付成功',
    '3': '支付失败',
    '4': '已退款'
  }
  return statusMap[status] || '未知状态'
}

const getRecordStatusClass = (status) => {
  const classMap = {
    '0': 'status-pending',
    '1': 'status-processing',
    '2': 'status-success',
    '3': 'status-failed',
    '4': 'status-refunded'
  }
  return classMap[status] || 'status-unknown'
}

// 获取缴费金额
const getPaymentAmount = () => {
  if (!dataInfo.value) return '0.00'
  
  // 确保数据类型安全，转换为数字类型
  const unpaidAmount = Number(dataInfo.value.unpaidAmount) || Number(dataInfo.value.amount) || 0
  const lateFee = Number(dataInfo.value.lateFee) || 0
  
  // 验证数字的有效性
  if (isNaN(unpaidAmount) || isNaN(lateFee)) {
    console.warn('费用金额数据异常:', { unpaidAmount: dataInfo.value.unpaidAmount, amount: dataInfo.value.amount, lateFee: dataInfo.value.lateFee })
    return '0.00'
  }
  
  // 计算总金额并格式化
  const totalAmount = unpaidAmount + lateFee
  return totalAmount.toFixed(2)
}

// 拨打电话
const handleCall = (phoneNumber) => {
  if (!phoneNumber) return
  
  uni.showModal({
    title: '拨打电话',
    content: `确定要拨打 ${phoneNumber} 吗？`,
    success: (res) => {
      if (res.confirm) {
        uni.makePhoneCall({
          phoneNumber: phoneNumber,
          success: () => {
            console.log('拨打电话成功')
          },
          fail: (error) => {
            console.error('拨打电话失败:', error)
            uni.showToast({
              title: '拨打电话失败',
              icon: 'none'
            })
          }
        })
      }
    }
  })
}

// 图片预览事件处理
const handleImagePreview = (data) => {
  console.log('图片预览事件:', data)
  // AppImagePreview组件会自动处理预览，这里可以添加额外的逻辑
}

// 图片错误事件处理
const handleImageError = (data) => {
  console.error('图片错误事件:', data)
  uni.showToast({
    title: '图片加载失败',
    icon: 'none'
  })
}

// 图片加载事件处理
const handleImageLoad = (data) => {
  console.log('图片加载事件:', data)
}

// 申请延期
const handleReminder = () => {
  if (!dataInfo.value) return
  
  uni.showModal({
    title: '申请延期',
    content: '确定要申请延期缴费吗？延期申请将提交给物业公司审核。',
    success: (res) => {
      if (res.confirm) {
        // 这里应该调用延期申请API
        uni.showToast({
          title: '延期申请已提交',
          icon: 'success'
        })
      }
    }
  })
}

// 联系客服
const handleContact = () => {
  uni.showModal({
    title: '联系客服',
    content: '客服电话：400-123-4567\n工作时间：周一至周日 9:00-18:00',
    showCancel: false,
    confirmText: '确定'
  })
}
</script>

<style lang="scss" scoped>
.data-detail-page {
  min-height: 100vh;
  width: 100%;
  background: #f5f5f5;
  padding-bottom: 120rpx;
  box-sizing: border-box;
}

.status-section, .info-section, .detail-section, .action-section {
  padding: 0 20rpx 20rpx;
  width: 100%;
  box-sizing: border-box;
  
  .status-card, .info-card, .detail-card {
    background: white;
    border-radius: 16rpx;
    padding: 30rpx;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
    
    .card-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 24rpx;
      padding-bottom: 16rpx;
      border-bottom: 1rpx solid #f0f0f0;
    }
    
    .status-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16rpx;
      
      .status-title {
        font-size: 36rpx;
        font-weight: 600;
        color: #333;
      }
    }
    
    .status-desc {
      font-size: 26rpx;
      color: #666;
      line-height: 1.4;
    }
  }
}

.info-section, .detail-section, .progress-section, .records-section {
  padding: 0 20rpx 20rpx;
  
  .info-card, .detail-card, .progress-card, .records-card {
    background: white;
    border-radius: 16rpx;
    padding: 30rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
    
    .card-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 24rpx;
      padding-bottom: 16rpx;
      border-bottom: 1rpx solid #f0f0f0;
    }
  }
}

.info-list {
  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .info-label {
      display: flex;
      align-items: center;
      gap: 12rpx;
      flex-shrink: 0;
      width: 160rpx;
      
      text {
        font-size: 26rpx;
        color: #666;
      }
    }
    
    .info-value {
      font-size: 26rpx;
      color: #333;
      text-align: right;
      flex: 1;
      word-break: break-all;
      
      &.amount {
        font-weight: 600;
        color: #ff4757;
      }
      
      &.due-date {
        color: #ffa502;
      }
    }
  }
}

.detail-list {
  .detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .detail-label {
      font-size: 26rpx;
      color: #666;
    }
    
    .detail-value {
      font-size: 26rpx;
      color: #333;
      font-weight: 500;
      
      &.unpaid {
        color: #ff4757;
      }
      
      &.late-fee {
        color: #ffa502;
      }
    }
  }
}

.progress-content {
  .progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16rpx;
    
    .progress-text {
      font-size: 26rpx;
      color: #666;
    }
    
    .progress-amount {
      font-size: 28rpx;
      color: #333;
      font-weight: 600;
    }
  }
  
  .progress-bar {
    height: 8rpx;
    background: #f0f0f0;
    border-radius: 4rpx;
    overflow: hidden;
    margin-bottom: 12rpx;
    
    .progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #2ed573 0%, #7bed9f 100%);
      border-radius: 4rpx;
      transition: width 0.3s ease;
    }
  }
  
  .progress-percentage {
    text-align: right;
    font-size: 24rpx;
    color: #666;
  }
}

.records-list {
  .record-item {
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .record-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8rpx;
      
      .record-amount {
        font-size: 28rpx;
        color: #333;
        font-weight: 600;
      }
      
      .record-time {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    .record-details {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .record-method {
        font-size: 24rpx;
        color: #666;
      }
      
      .record-status {
        font-size: 24rpx;
        padding: 4rpx 12rpx;
        border-radius: 12rpx;
        
        &.status-pending {
          background: #fff3cd;
          color: #856404;
        }
        
        &.status-processing {
          background: #d1ecf1;
          color: #0c5460;
        }
        
        &.status-success {
          background: #d4edda;
          color: #155724;
        }
        
        &.status-failed {
          background: #f8d7da;
          color: #721c24;
        }
        
        &.status-refunded {
          background: #e2e3e5;
          color: #383d41;
        }
      }
    }
  }
}

.action-section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx;
  background: white;
  border-top: 1rpx solid #f0f0f0;
  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.loading-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 20rpx;
  
  .loading-text {
    margin-top: 20rpx;
    font-size: 26rpx;
    color: #666;
  }
}

.payment-section {
  padding: 0 20rpx 20rpx;
  width: 100%;
  box-sizing: border-box;
  
  .payment-card {
    background: white;
    border-radius: 16rpx;
    padding: 30rpx;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  }
}

.company-info {
  background-color: #f8f9fa;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 30rpx;
  
  .company-name {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 12rpx;
  }
  
  .company-desc {
    font-size: 26rpx;
    color: #666;
    line-height: 1.5;
  }
}

.qr-code-container {
  text-align: center;
  margin-bottom: 30rpx;
  
  .qr-code-title {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 24rpx;
    font-weight: 500;
  }
  
  .qr-code-images {
    margin-bottom: 24rpx;
  }
  
  .qr-code-tip {
    font-size: 24rpx;
    color: #999;
  }
}

.payment-account-info {
  background-color: #f8f9fa;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 30rpx;
  
  .account-title {
    font-size: 28rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 24rpx;
  }
  
  .account-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .account-label {
      font-size: 26rpx;
      color: #666;
    }
    
    .account-value {
      font-size: 26rpx;
      color: #333;
      font-weight: 500;
    }
  }
}

.contact-info {
  background-color: #f8f9fa;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 30rpx;
  
  .contact-title {
    font-size: 28rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 24rpx;
  }
  
  .contact-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .contact-label {
      font-size: 26rpx;
      color: #666;
    }
    
    .contact-value {
      font-size: 26rpx;
      color: #16a085;
      font-weight: 500;
      cursor: pointer;
    }
  }
}

.payment-instructions {
  background-color: #f0f8ff;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 30rpx;
  
  .instructions-title {
    font-size: 28rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 24rpx;
  }
  
  .instructions-content {
    .instruction-item {
      display: block;
      font-size: 26rpx;
      color: #666;
      margin-bottom: 12rpx;
      line-height: 1.5;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

.action-section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: white;
  padding: 20rpx;
  border-top: 1rpx solid #f0f0f0;
  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  
  .action-buttons {
    display: flex;
    gap: 20rpx;
    
    .u-button {
      flex: 1;
    }
  }
}

.error-section {
  padding: 100rpx 20rpx;
}
</style>
